<template>
	<!-- 底部输入框 -->
	<view class="send-bar">
		<view class="send-text">
			<u-input :class="stopInputAuto?'send-text-input':'send-text-area'" v-model="content" :fixed="true" type="textarea" height="30"
				:auto-height="true" placeholder="请来一个友善的问候吧(^_^)" maxlength="500"
				@confirm="submit"></u-input>
		</view>
		<view>
			<u-button class="btn-send" size="medium" :disabled="sendDisabled" type="primary"
				@click="submit">发送</u-button>
		</view>
	</view>
</template>

<script>
	/*
	 * BottomInpu 底部输入框
	 * @description 用于输入文字信息，如：回复消息，发送消息等
	 * @author MrThinco
	 */
	export default {
		data() {
			return {
				content: undefined,
				sendDisabled: true,
				stopInputAuto:false
			}
		},
		watch: {
			content: {
				handler(newval) {
					if (newval) {
						this.sendDisabled = false
						if(newval.length>80){
							this.stopInputAuto=true
						}else {
							this.stopInputAuto=false
						}
					} else {
						this.sendDisabled = true
						this.stopInputAuto=false
					}
				}
			}
		},
		methods: {
			// 发送
			submit() {
				// 消息不能为空
				if (this.content === '') return uni.showToast({
					title: '消息不能为空',
					icon: 'none'
				})
				// 发送事件
				this.$emit('submit', this.content)
				// 清空输入框
				this.content = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.send-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0 -1rpx 1rpx rgba($color: #000000, $alpha: 0.16);


		.send-text {
			flex: 1;
			background-color: #f8f8f8 !important;
			overflow: auto;
			margin: 10rpx;
			margin-left: 20rpx;
			padding: 10rpx;
			background-color: #fff;
			border-radius: 20rpx;
			font-size: 30rpx;
			box-sizing: border-box;

			.send-text-area {
				width: 100%;
			}
			
			.send-text-input {
				height: 150rpx;
				width: 100%;
			}
		}

		.btn-send {
			width: 80rpx;
			margin: 10rpx;
		}
	}
</style>